<template>
	<view class="oa-content">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed customBack :bottomShadow="false" backgroundColor="#FFFFFF">
			<!-- <view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left-arrow'></text>
			</view> -->
			<view class="tn-flex tn-flex-col-center tn-flex-row-center ">
				<text class="tn-text-bold tn-text-xl tn-color-black">幸福时光记忆冲印</text>
			</view>
		</tn-nav-bar>


		<view class="" :style="{paddingTop: vuex_custom_bar_height + 30 + 'px'}" style="padding-bottom: 240rpx;">

			<!-- <picker @change="bindPickerChange" :value="index" :range="array">
        <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding">
          <view class="justify-content-item tn-flex-1">
            <view class="tn-text-bold tn-text-lg">
              加班类型 <text class="tn-color-red tn-padding-left-xs">*</text>
            </view>
            <view class="tn-color-gray tn-padding-top-xs" v-if="index===99">
              请选择
            </view>
            <view class="tn-color-black tn-padding-top-xs" v-else>
              {{array[index]}}
            </view>
          </view>
          <view class="justify-content-item tn-text-lg tn-color-grey tn-margin-left">
            <view class="tn-icon-right tn-padding-top"></view>
          </view>
        </view>
      </picker>
      
      
      <view class="">
        <tn-picker mode="time" v-model="show" :params="params" :startYear="startYear" :endYear="endYear" @confirm="confirmPicker"></tn-picker>
      </view>
      
      <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding" @tap="showPicker">
        <view class="justify-content-item tn-flex-1">
          <view class="tn-text-bold tn-text-lg">
            开始时间 <text class="tn-color-red tn-padding-left-xs">*</text>
          </view>
          <view class="tn-color-gray tn-padding-top-xs" v-if="result===''">
            请选择
          </view>
          <view class="tn-padding-top-xs" v-else>
            {{ result }}
          </view>
        </view>
        <view class="justify-content-item tn-text-lg tn-color-grey tn-margin-left">
          <view class="tn-icon-time tn-padding-top"></view>
        </view>
      </view>
      
      <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding" @tap="showPicker">
        <view class="justify-content-item tn-flex-1">
          <view class="tn-text-bold tn-text-lg">
            结束时间 <text class="tn-color-red tn-padding-left-xs">*</text>
          </view>
          <view class="tn-color-gray tn-padding-top-xs" v-if="result===''">
            请选择
          </view>
          <view class="tn-padding-top-xs" v-else>
            {{ result }}
          </view>
        </view>
        <view class="justify-content-item tn-text-lg tn-color-grey tn-margin-left">
          <view class="tn-icon-time tn-padding-top"></view>
        </view>
      </view> -->

			<view>
				<view class="content tn-padding-left tn-padding-right">
					<tn-form-item label="订单号" :labelWidth="120">
						<tn-input type="text" placeholder="请输入订单号" v-model="orderSn"></tn-input>
						<tn-button slot="right" backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm"
							@click="qryOrder">查询订单</tn-button>
					</tn-form-item>
				</view>
			</view>

			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding">
				<view class="tn-flex justify-content-item">
					<view class="tn-text-bold tn-text-lg">
						订单信息<!-- <text class="tn-color-red tn-padding-left-xs">*</text> -->
					</view>
				</view>
				<view class="tn-flex justify-content-item tn-color-gray">
					<!-- 200字内 -->
				</view>
			</view>
			<view class="tn-padding tn-text-justify"
				style="border-radius: 10rpx;margin: 0 30rpx 30rpx 30rpx;" v-if="orderId">
				<!-- <textarea maxlength="500" placeholder="请简单写一下加班事由" placeholder-style="color:#AAAAAA" style="height: 160rpx;width: 100%;"></textarea> -->
				<tn-steps :list="list" :current="current" mode="icon" activeColor="#24F083" inActiveColor="#E6E6E6"></tn-steps>

			</view>
			<view class="tn-bg-gray--light tn-padding tn-text-justify"
				style="border-radius: 10rpx;margin: 0 30rpx 30rpx 30rpx;">
				<!-- <textarea maxlength="500" placeholder="请简单写一下加班事由" placeholder-style="color:#AAAAAA" style="height: 160rpx;width: 100%;"></textarea> -->
				<text class="tn-color-red tn-padding-left-xs">{{orderSpec1}}</text>
				<view></view>
				<text class="tn-color-red tn-padding-left-xs">{{orderSpec2}}</text>
			</view>

			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding tn-strip-top">
				<view class="tn-flex justify-content-item">
					<view class="tn-text-bold tn-text-lg">
						上传图片
					</view>
				</view>
				<view class="tn-flex justify-content-item tn-color-gray">
					最多{{maxCount}}张
				</view>
			</view>

			<view class="tn-padding-left tn-padding-top-xs tn-padding-bottom-xs tn-strip-bottom-min">
				<tn-image-upload ref="imageUpload" :action="action" :width="226" :height="226" :formData="formData"
					:fileList="fileList" :disabled="disabled" :autoUpload="autoUpload" :maxCount="maxCount"
					:showUploadList="showUploadList" :showProgress="showProgress" :deleteable="deleteable"
					:customBtn="customBtn" @sort-list="onSortList" @on-success="onSuccess"
					:beforeUpload="beforeUpload" :beforeRemove="beforeRemove" />

			</view>

			<!-- <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding tn-strip-top">
        <view class="tn-flex justify-content-item">
          <view class="tn-text-bold tn-text-lg">
            上传附件
          </view>
        </view>
        <view class="justify-content-item tn-text-xl tn-color-grey">
          <view class="tn-icon-add-circle"></view>
        </view>
      </view> -->

			<!-- <view class="tn-margin-left tn-margin-right tn-margin-bottom" style="background-color: #00C8B008;color: #00C8B0;border-radius: 10rpx;" v-for="(item, index) in 1" :key="index" @click="tn('')">
        <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding">
          <view class="justify-content-item tn-text-bold tn-text-left" style="width: 80%;">
            <view class="">
              <text class="">2024年10月-加班人员表.xls</text>
            </view>
            <view class="tn-padding-top-xs tn-text-sm">
              <text class="tn-icon-folder-fill "></text>
              <text class="tn-padding-left-xs">102.01 KB</text>
            </view>
          </view>
          <view class="justify-content-item">
            <text class="tn-icon-close-fill"></text>
          </view>
        </view>
      </view> -->

			<!-- <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding tn-strip-top">
        <view class="justify-content-item tn-flex-1">
          <view class="tn-text-bold tn-text-lg">
            审批人员 <text class="tn-color-red tn-padding-left-xs">*</text>
          </view>
          <view class="tn-color-gray tn-padding-top-xs">
            请选择
          </view>
        </view>
        <view class="justify-content-item tn-text-lg tn-color-grey tn-margin-left">
          <view class="tn-icon-my-add tn-padding-top"></view>
        </view>
      </view> -->

			<!-- <view class="tn-flex tn-flex-row-between tn-padding">
        <view class="justify-content-item tn-flex-1">
          <view class="tn-text-bold tn-text-lg">
            抄送人员 <text class="tn-color-red tn-padding-left-xs">*</text>
          </view>
          <view class="tn-color-gray tn-padding-top-xs">
            请选择
          </view>
        </view>
        <view class="justify-content-item tn-text-lg tn-color-grey tn-margin-left">
          <view class="tn-icon-my-add tn-padding-top"></view>
        </view>
      </view> -->


			<!-- <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding tn-strip-top">
        <view class="tn-flex justify-content-item">
          <view class="tn-text-bold tn-text-lg">
            上传视频
          </view>
        </view>
        <view class="tn-flex justify-content-item tn-color-gray">
          最多1个
        </view>
      </view>
      
      <view class="video-choose">
        <view v-if="!videoUrl" class="choose-operation" @tap.stop="videoChooseHandle">
          <view class="icon">
            <text class="tn-icon-video-square"></text>
          </view>
          <view class="tips">
            上传视频
          </view>
        </view>
        <view v-else class="video-preview">
          <video class="video-container" :src="videoUrl" object-fit="cover"
            :enable-progress-gesture="false" :show-loading='false' :show-play-btn='false'
            :show-fullscreen-btn='false' :controls='false' :autoplay='false'
            :enable-play-gesture='false' :loop="false"
          ></video>
          <view class="remove-btn" @tap.stop="reChooseVideo">
            <text class="tn-icon-close remove-btn--icon"></text>
          </view>
        </view>
      </view> -->
			<view class="tn-flex tn-padding">
				<view class="tn-flex-1 justify-content-item tn-text-center">
					<view class="tn-flex justify-content-item tn-color-gray">
						还可上传{{ maxCount-fileList.length>0?maxCount-fileList.length:0}}张
					</view>
				</view>
			</view>
			<!-- 悬浮按钮-->
			<view class="tn-flex tn-footerfixed tn-padding" v-if="!disabled&&orderId">
				<view class="tn-flex-1 justify-content-item tn-text-center">
					<tn-button backgroundColor="#00C8B0 " padding="40rpx 0" width="60%" :fontSize="28"
						fontColor="#FFFFFF" shape="round" @click="openPicker()">
						<text class="">开始制作</text>
					</tn-button>
				</view>
			</view>


		<tn-modal v-model="show" :title="title" :content="content" @click="makePhoto" :button="button"></tn-modal>

		</view>
		<tn-tips ref="tips" position="top" zIndex="99999"></tn-tips>
	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	export default {
		name: 'TemplateOvertime',
		mixins: [template_page_mixin],
		data() {
			return {
				 list: [
				          {name: '待上传'},
				          {name: '上传中', icon: 'trusty', selectIcon: 'trusty-fill'},
				          {name: '制作中', icon: 'safe', selectIcon: 'safe-fill'}
				        ],
						 current: 1,
				//show: false,
				        title: '制作相片',
				        content: '提交制作后将无法继续上传相片,是否继续提交?',
						button: [{
						            text: '取消',
						            backgroundColor: '#E6E6E6',
						            // fontColor: '#FFFFFF',
						            plain: true,
						            shape: 'round'
						          },
						          {
						            text: '确定',
						            backgroundColor: 'tn-bg-indigo',
						            fontColor: '#FFFFFF'
						          }
						        ],
				// 只显示年月日时分，不显示秒
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				show: false,
				result: '',
				startYear: 2023,
				endYear: 2100,
				orderStatus:0,

				index: 99,
				array: ['紧急任务', '单纯想加班'],
				orderSn: '',

				action: 'https://up-z2.qiniup.com', //'https://www.hualigs.cn/api/upload',
				// action: '',
				formData: {
					apiType: 'this,ali',
					token: 'O3gMOGIpe5kNObGdCVBI6UpzfmyUZ5lbeO2sPu7a:hx3nzXYA74hMqnI_1dzc4eUI-Fo=:eyJzY29wZSI6InByaW50MjAyNSIsImRlYWRsaW5lIjoxNzM3MTU4OTc1fQ==',
					image: null,
					name: '',
				},
				fileList: [],
				showUploadList: true,
				customBtn: false,
				autoUpload: true,
				showProgress: true,
				deleteable: true,
				customStyle: false,
				maxCount: 0,
				disabled: false,

				videoUrl: '',
				orderSpec1: '',
				orderSpec2: '',
				orderId:'',
				day:'',
				baseUrl:'https://app.funstudy.cn/prod-api'
			}
		},
		methods: {
			// 弹出Picker
			showPicker(event) {
				this.openPicker()
			},
			// 打开Picker
			openPicker() {
				this.show = true
			},
			
			getRandomInt(min,max){
				min = Math.ceil(min); // 将 min 向上取整
				    max = Math.floor(max); // 将 max 向下取整
				    return Math.floor(Math.random() * (max - min + 1)) + min; // 生成随机数
			},
			beforeUpload(index,list) {
				//this.formData.key =this.day+"/"+this.orderSn+"_"+list[index].data.file.name;
				this.formData.key =this.day+"/"+this.orderSn+"/"+index+"_"+this.getRandomInt(1,1000)+"_"+list[index].file.name;
				
			},
			beforeRemove(index,list){
				console.log(index,list);
				if(list[index].error){
					return;
				}
				// let img= this.fileList[index];
				const indexToDelete = this.fileList.findIndex(obj => obj.imgOssId === list[index].imgOssId);
				if (indexToDelete !== -1) {
				    this.fileList.splice(indexToDelete, 1);
				}
				// console.log(img);
				uni.request({
					url: this.baseUrl+'/common/api/del-order-img',
					data: {
						imgOssId:list[index].imgOssId//img.imgOssId
					},
					method: 'DELETE',
					success: (res) => {
						
						//this.fileList.splice(index,1);
						let data = res.data;
						console.log(res);
					},
					fail: (res) => {
						console.log(res);
					}
				})
			},
			
			makePhoto(index){
				console.log(index);
				if(index.index===0){
					this.show=false;
					return;
				}
				let _this=this;
				if (!this.orderSn) {
					this.$refs.tips.show({
						msg: '请输入订单号',
						backgroundColor: '#01BEFF',
						fontColor: '#FFFFFF',
						duration: 2500
					})
					// this.show=false;
					return;
				}
				if(this.maxCount>this.fileList.length){
					this.$refs.tips.show({
						msg: '相片还差'+(this.maxCount-this.fileList.length)+"张，请继续上传",
						backgroundColor: '#01BEFF',
						fontColor: '#FFFFFF',
						duration: 2500
					})
					// this.show=false;
					return;
				}
				uni.request({
					url: this.baseUrl+'/common/api/set-pdd-order-status',
					data: {
						id: this.orderId
					},
					method: 'POST',
					success: (res) => {
						let data = res.data;
						console.log(res);
						if (data.code != 200) {
							this.$refs.tips.show({
								msg: data.msg,
								backgroundColor: '#01BEFF',
								fontColor: '#FFFFFF',
								duration: 2500
							})
							return;
						}
						_this.show=false;
						_this.tn('/workPages/prompt');
				
				
					},
					fail: (res) => {
						console.log(res);
					}
				})
			},

			qryOrder() {
				this.fileList=[];
				this.orderSpec1 = '';
				this.orderSpec2 = '';
				this.orderId='';
				this.maxCount=0;
				if (!this.orderSn) {
					this.$refs.tips.show({
						msg: '请输入订单号',
						backgroundColor: '#01BEFF',
						fontColor: '#FFFFFF',
						duration: 2500
					})
					return;
				}
				let _this = this;
				uni.request({
					url: this.baseUrl+'/common/api/pdd-order',
					data: {
						orderSn: this.orderSn
					},
					method: 'POST',
					success: (res) => {
						let data = res.data;
						console.log(res);
						if (data.code != 200) {
							this.$refs.tips.show({
								msg: data.msg,
								backgroundColor: '#01BEFF',
								fontColor: '#FFFFFF',
								duration: 2500
							})
							return;
						}
						_this.disabled=false;
						if (data.data.orderSpec) {
							const specs = data.data.orderSpec.split(',');
							_this.orderSpec1 = specs[0];
							_this.orderSpec2 = specs[1];
						}
						 _this.maxCount=data.data.picNum;
						 _this.orderId=data.data.id;
						 _this.formData.token=data.data.qiniuToken;
						_this.day=data.data.day;
						_this.orderStatus=data.data.orderStatus;
						
						if(data.data.imgs&&data.data.imgs.length>0){
							_this.current=2;
							let files=[];
							for(let index=0;index<=data.data.imgs.length-1;index++){
								files.push({url:'http://pdd-img.funstudy.cn/'+data.data.imgs[index].imgOssId+"?imageView2/1/q/50",imgOssId:data.data.imgs[index].imgOssId});
								//files.push({url:'https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1693930222931-assets/web-upload/88cba319-dd2f-414a-9316-5bb9c0761231.jpeg'});
							}
							console.log(files);
							_this.fileList=files;
							console.log(this.fileList);
							//_this.$set(_this.fileList, files.length, files);
							_this.$forceUpdate();
						}
						if(data.data.orderStatus==2){
							_this.current=3;
							_this.disabled=true;
							
						}


					},
					fail: (res) => {
						console.log(res);
					}
				})
			},

			// 点击确认按钮
			confirmPicker(event) {
				this.result =
					`${event.year}-${event.month}-${event.day} ${this.params.hour ? event.hour+':' : ''}${this.params.minute ? event.minute : ''}`
				// this.result = `${event.year}-${event.month}-${event.day} ${this.params.hour ? event.hour+':' : ''}${this.params.minute ? event.minute+':' : ''}${this.params.second ? event.second : ''}`
			},

			onSuccess(data, index, lists, name) {
				let url='http://pdd-img.funstudy.cn/'+this.formData.key+"?imageView2/1/q/50";
				lists[index].url=url;
				lists[index].imgOssId=this.formData.key;
				this.fileList.push({url:url,imgOssId:this.formData.key});
				uni.request({
					url: this.baseUrl+'/common/api/add-order-img',
					data: {
						orderId: this.orderId,
						imgOssId:this.formData.key
					},
					method: 'POST',
					success: (res) => {
						let data = res.data;
						console.log(res);
					},
					fail: (res) => {
						console.log(res);
					}
				})
			},

			bindPickerChange: function(e) {
				this.index = e.detail.value
			},

			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
			// 手动上传文件
			upload() {
				this.$refs.imageUpload.upload()
			},
			// 图片拖拽重新排序
			onSortList(list) {
				console.log(list);
			},

			// 视频选择
			videoChooseHandle() {
				uni.chooseVideo({
					success: (res) => {
						// 上传完成后再把视频地址填写到这里，这里只是临时测试用
						this.videoUrl = res.tempFilePath
					}
				})
			},
			// 重新选择视频
			reChooseVideo() {
				this.videoUrl = ''
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 60%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 32rpx;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

	}

	.oa-content {
		max-width: 640px;
		margin: 0 auto;
		// background-color: #F8F7F8;
		min-height: 100vh;
		padding-bottom: 60rpx;
		padding-bottom: calc(80rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(80rpx + constant(safe-area-inset-bottom));
	}


	.video-choose {
		position: relative;
		width: calc(100% - 60rpx);
		height: 340rpx;
		background-color: #f8f7f8;
		color: #838383;
		border-radius: 10rpx;
		margin: 10rpx 0 30rpx 30rpx;

		.choose-operation {
			position: relative;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-radius: inherit;

			.icon {
				font-size: 70rpx;
				line-height: 1;
				padding: 20rpx;
			}

			.tips {
				line-height: 1;
			}
		}

		.video-preview {
			position: relative;
			width: 100%;
			height: 100%;
			border-radius: inherit;

			.video-container {
				width: 100%;
				height: 100%;
				border-radius: inherit;
			}

			.remove-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 0;
				right: 0;
				z-index: 10;
				border-top: 60rpx solid;
				border-left: 60rpx solid transparent;
				border-top-color: rgba(0, 0, 0, 0.1);
				width: 0rpx;
				height: 0rpx;

				&--icon {
					position: absolute;
					top: -50rpx;
					right: 6rpx;
					color: #FFFFFF;
					font-size: 24rpx;
					line-height: 1;
				}
			}
		}
	}

	/* 间隔线 start*/
	.tn-strip-bottom-min {
		width: 100%;
		border-bottom: 1rpx solid #F8F9FB;
	}

	.tn-strip-top {
		width: 100%;
		border-top: 20rpx solid rgba(241, 241, 241, 0.8);
	}

	/* 间隔线 end*/

	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 160rpx;
		height: calc(180rpx + env(safe-area-inset-bottom) / 2);
		height: calc(180rpx + constant(safe-area-inset-bottom));
	}

	.tn-footerfixed {
		max-width: 640px;
		margin: 0 auto;
		position: fixed;
		width: 100%;
		bottom: calc(40rpx + env(safe-area-inset-bottom));
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
	}

	/* 底部悬浮按钮 end*/
</style>